<!DOCTYPE html >
<html >
<head>
<meta  charset="utf-8">
<title>用户注册界面</title>

<style type="text/css">
	h1{
		color:black;
		font-weight:bold;
		text-align:center;
		text-shadow:2px 2px 5px #FFFF00;
	}
	span{color:red }
</style>
<script type="text/javascript">
	
	function userMethod()
	{
		var user = document.getElementById("input_user").value;
		if(user.length>6||user.length<3)
			{
				alert("用户名由3-6个字符组成")
			/*document.getElementById("zhushi_user").style.color="red";*/
			}
		else document.getElementById("zhushi_user").style.color="green";
	}
	function passMethod()
	{
		var pass = document.getElementById("input_pass1").value;
		if(pass.length>12||pass.length<8)
			{
			alert("请输入8-12位密码")	
			/*document.getElementById("zhushi_pass1").style.color="red";*/
			}
		else document.getElementById("zhushi_pass1").style.color="green";
	}
	function passMethod2()
	{
		 var pass1 = document.getElementById("input_pass1").value;
		 var pass2 = document.getElementById("input_pass2").value;
		if(pass1!=pass2)
			{
				alert("两次密码不一致")
			/*document.getElementById("zhushi_pass2").style.color="red";*/
			}
		else document.getElementById("zhushi_pass2").style.color="green";
	}
	function emailMethod()
	{
		 var email = document.getElementById("input_email").value;
		 var pattern = /^[a-zA-Z0-9#_\^\$\.\*\+\-\?\=\]+@[a-zA-Z0-9]+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; //email的正则表达式
		if(!pattern.test(email))
			{
				alert("不符合格式：XXXXXXX@QQ.com")
			/*document.getElementById("zhushi_email").style.color="red";*/
			}
		else
			{
			document.getElementById("zhushi_email").style.color="green";
			}
	}
	function phoneMethod()
	{
		var phone_num = document.getElementById("input_phone").value;
		var pattern = /^1[0-9]{10}$/;		//phone的正则表达式
		if(!pattern.test(phone_num))
			{
				alert("不符合格式：138-xxxx-xxxx")
			/*document.getElementById("zhushi_phone").style.color="red";*/
			}
		else  
		{
			document.getElementById("zhushi_phone").style.color="green";
		}
	}
	
	function nameMethod()
	{
		var name = document.getElementById("input_name").value;
		if(name.length>5||name.length<2)
			{
				alert("由2-5个中文组成")
			/*document.getElementById("zhushi_name").style.color="red";*/
			
			}	
		else 
		{
			document.getElementById("zhushi_name").style.color="green";
		}
	}
	function checkAll(){
		userMethod();
		passMethod();
		passMethod2();
		emailMethod();
		phoneMethod();
		nameMethod();
	}
</script>
</head>
<body>
<h1>用户注册</h1>
<table align="center">
<form method="get"  action="" target="rfFrame">
<tr>
<td><span style="vertical-align:super;"></span>用户名：</td>
<td >
	<input  type = "text" onBlur="userMethod()" id="input_user" style="width:330px;"></input>
</td>
<!--<td id="zhushi_user">用户名由3-5个字符组成</td>-->
</tr>
<tr>
<td><span style="vertical-align:super;"></span>密码：</td>
<td>
	<input  type = "password" onBlur="passMethod()" id="input_pass1"style="width:330px;"></input>
</td>
<!--<td id="zhushi_pass1">请输入8-12位密码</td>-->
</tr>
<tr>
<td><span style="vertical-align:super;"></span>确认密码：</td>
<td>
	<input  type = "password" onBlur="passMethod2()" id="input_pass2"style="width:330px;" ></input>
</td>
<!--<td id="zhushi_pass2">两次密码不一致</td>-->
</tr>
<tr>
<td><span style="vertical-align:super;"></span>Email：</td>
<td>
	<input  type = "text" onBlur="emailMethod()" id="input_email"style="width:330px;"></input>
</td>
<!--<td id="zhushi_email">格式样例：XXXXXXX@QQ.com</td>-->
</tr>
<tr>
<td><span style="vertical-align:super;"></span>手机号码：</td>
<td>
	<input  type = "text" onBlur="phoneMethod()" id="input_phone"style="width:330px;"></input>
</td>
<!--<td id="zhushi_phone">格式样例：13866688000</td>-->
</tr>
<tr>
<td><span style="vertical-align:super;"></span>真实姓名：</td>
<td >
	<input  type = "text" onBlur="nameMethod()" id="input_name" style="width:330px;"></input>
</td>
<!--<td id="zhushi_name">由2-5个中文组成</td>-->
</tr>
<tr>

</tr>
<tr>
<td><span style="vertical-align:super;"></span>性别：</td>
<td><p>
  <label>
    <input type="radio" name="男" value="单选" id="男_0">
    男</label>
  <label>
    <input type="radio" name="男" value="单选" id="男_1">
    女</label>
  <br>
</p></td>
</tr>
<tr>
<td colspan = "2" align = "center">
	<input type = "submit" name = "submit" onClick = "checkAll();" value = "注册"/>
	  <input type = "reset" name = "reset" value = "重置"/>
</td>
</tr>
</form>
 <iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe> 
</table>
</body>

</html>
